<template>
    <view class="u-checkbox-group u-clearfix">
        <slot></slot>
    </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, provide } from 'vue';
import { $u } from '../..';
import { CheckboxGroupProps } from './types';

defineOptions({
    name: 'u-checkbox-group'
});

/**
 * checkboxGroup 开关选择器父组件Group
 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
 * @tutorial https://uviewpro.cn/zh/components/checkbox.html
 * @property {String Number} max 最多能选中多少个checkbox（默认999）
 * @property {String Number} size 组件整体的大小，单位rpx（默认40）
 * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
 * @property {String Number} icon-size 图标大小，单位rpx（默认20）
 * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
 * @property {String} width 宽度，需带单位
 * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
 * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
 * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
 * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
 * @example <u-checkbox-group></u-checkbox-group>
 */

const props = defineProps(CheckboxGroupProps);

const emit = defineEmits(['change']);

// 复选框子项集合
const children = ref<any[]>([]); // 用于存储所有子checkbox实例

// 向子组件 provide 本 group 实例
provide('u-checkbox-group', {
    props,
    emitEvent,
    children
});

const instance = getCurrentInstance();

/**
 * 派发 change 事件和表单校验
 */
function emitEvent() {
    // 收集所有选中的 name
    let values: any[] = [];
    children.value.forEach(val => {
        if (val.modelValue) values.push(val.name);
    });
    emit('change', values);
    // 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
    // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
    setTimeout(() => {
        // 将当前的值发送到 u-form-item 进行校验
        $u.dispatch(instance, 'u-form-item', 'on-form-change', values);
    }, 60);
}

defineExpose({ emitEvent, children, props });
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-checkbox-group {
    /* #ifndef MP || APP-NVUE */
    display: inline-flex;
    flex-wrap: wrap;
    /* #endif */
}
</style>
